<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<!-- 
    我们从5.2正确响应式原理中可以看到Vue不管有多少层级，属性都会有getter和setter，setter中都会调用重新解析模板的方法===>生成虚拟dom===》转为真实dom渲染到页面
       目前结论
            （1）Vue监测对象时，只有现有的对象属性发生变化才会重新解析模板,除此之外添加属性、删除属性、都不能引起Vue的监测，也不会重新解析模板，也不会生成虚拟dom，也不会更新页面内容

 -->

<body>
    <div id="root">
        <button @click="addName">添加对象名字</button>
        <button @click="deleteAge">删除对象年龄</button>
        {{person}}
    </div>
    <script>
        Vue.config.productionTip = false; //以阻止vue在启动时生成生产提示
        new Vue({
            el: "#root",
            data: {
                person: {
                    age: 14
                }
            },
            methods: {
                addName() {
                    this.person.name = "zhang"
                    // this.person.age = 15   如果不添加这条，点击的时候网页上看不到更新，很显然，VUE监测对于对象除了改变其属性值之外的任何操作，都不会被检测到
                    console.log(this.person)
                },
                deleteAge() {
                    delete this.person.age //VUE监测对于对象除了改变其属性值之外的任何操作，都不会被检测到
                    console.log(this.person)
                }
            }
        })
    </script>


</body>

</html>